<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/comm/mytags.jsp" %>
<!DOCTYPE html>
<html  data-dpr="1" style="font-size: 30.7498px;">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>互联网+教育中台</title>
    <link rel="stylesheet" href="${ctx}/static/css/middlebigscreen.css">
    <link rel="shortcut icon" href="${ctx}/static/img/f_icon.png" type="image/x-icon">

<body>
<div id="#app">
    <div class="wlcp-page-dev">
        <div class="header">
            <div class="wlcp-dev-header">
                <div class="header-box">
                    <h2 class="header-title">互联网+教育中台</h2>
                </div>
                <div class="header-btn-box">
                    <ul  class="left-btn"></ul>
                    <ul class="right-btn">
                        <a href="${ctx}/middleground/middle_business_page.action">
                            <li  class="btn btn-active"> 组件共享</li>
                        </a>
                        <a href="${ctx}/middleground/middle_science_page.action">
                            <li  class="btn"> 技术地图</li>
                        </a>
                        <div class="btn-back" style="visibility: hidden;"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="wlcp-page-business">
                <div class="business-left">
                    <div class="wlcp-chart-bar">
                        <div class="wlcp-base-title">
                            <i class="decor-l" style="width: 3.25rem;"></i>
                            <span class="header-tit">组件贡献排行</span>
                            <i class="decor-r" style="width: 3.25rem;"></i>
                        </div>
                        <div id="bar-box">
                        </div>
                    </div>
                    <div class="wlcp-chart-bar-reuse">
                        <div class="wlcp-base-title">
                            <i class="decor-l" style="width: 3.25rem;"></i>
                            <span class="header-tit">组件复用排行</span>
                            <i class="decor-r" style="width: 3.25rem;"></i>
                        </div>
                        <div id="bar-box-reuse">
                        </div>
                    </div>
                </div>
                <div class="business-center">
                    <div class="business-top">
                        <div class="wlcp-core">
                            <div class="core-content" style="cursor: default;">
                                <p class="num">
                                    <span class="spec">&nbsp;</span>
                                    <span  style="font-size: 0.5rem;">正在核算中...</span>
                                </p>
                                <p class="name">累计节省成本</p>
                            </div>
                            <div class="core-content">
                                <p class="num">
                                    <span class="spec">38</span>
                                    <span>次</span>
                                </p>
                                <p class="name">总复用次数</p>
                            </div>
                        </div>
                    </div>
                    <div class="center-bottom">
                        <div class="wlcp-table-reuse">
                            <div class="wlcp-base-title">
                                <i class="decor-l" style="width:3.25rem;"></i>
                                <span class="header-tit">组件复用情况</span>
                                <i class="decor-r" style="width:3.25rem;"></i>
                            </div>
                            <div class="reuse-table-box">
                                <table class="reuse-table">
                                    <thead class="th-box">
                                        <tr class="th-row">
                                            <td class="th-name">组件名称及分类</td>
                                            <td class="th-from">组件来源</td>
                                            <td class="th-department">使用部门</td>
                                            <td class="th-project">使用项目/产品</td>
                                        </tr>
                                    </thead>
                                    <tbody class="tb-box">
                                        <tr class="tb-row">
                                            <td class="tb-name">
                                                <i class="icon-new"></i>
                                                <div class="class class-service"> 服务 </div>用户认证
                                            </td>
                                            <td class="tb-from">软件技术发展部</td>
                                            <td class="tb-department">精准扶贫平台部</td>
                                            <td class="tb-project">尉氏县智慧扶贫数共享平台</td>
                                        </tr>
                                        <tr class="tb-row">
                                            <td class="tb-name">
                                                <i class="icon-new"></i>
                                                <div class="class class-service"> 服务 </div>用户认证
                                            </td>
                                            <td class="tb-from">软件技术发展部</td>
                                            <td class="tb-department">精准扶贫平台部</td>
                                            <td class="tb-project">兰考县智慧扶贫数据共享平台（售后）</td>
                                        </tr>
                                        <tr class="tb-row">
                                            <td class="tb-name">
                                                <div class="class class-service"> 服务 </div>用户认证
                                            </td>
                                            <td class="tb-from">软件技术发展部</td>
                                            <td class="tb-department">精准扶贫平台部</td>
                                            <td class="tb-project">兰考县智慧扶贫数据共享平台（售后）</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="business-right">
                    <div class="wlcp-all-use">
                        <div class="wlcp-base-title">
                            <i class="decor-l" style="width: 3.25rem;"></i>
                            <span class="header-tit">组件整体使用排名</span>
                            <i class="decor-r" style="width: 3.25rem;"></i>
                        </div>
                        <div class="gradient-table-box">
                            <table class="wlcp-gradient-table">
                                <tr class="gradient-item">
                                    <td class="item-ranking">
                                        <div class="icon-ranking">
                                            <i class="icon-top1"></i>1
                                        </div>
                                    </td>
                                    <td class="td-item-label">
                                        <div title="用户认证" class="item-label">
                                            <p class="label">用户认证</p>
                                            <p class="class class-service"> 服务 </p>
                                        </div>
                                    </td>
                                    <td class="item-length">
                                        <div  class="length" style="width: 100%;"></div>
                                    </td>
                                    <td title="18次" class="item-tip">
                                        <span class="spec">18</span>
                                        <span >次</span>
                                    </td>
                                </tr>
                                <tr class="gradient-item">
                                    <td class="item-ranking">
                                        <div class="icon-ranking">
                                            <i class="icon-top2"></i>2
                                        </div>
                                    </td>
                                    <td class="td-item-label">
                                        <div title="安全传输加密" class="item-label">
                                            <p class="label">安全传输加密</p>
                                            <p class="class class-function"> 功能 </p>
                                        </div>
                                    </td>
                                    <td class="item-length">
                                        <div  class="length" style="width: 50%;"></div>
                                    </td>
                                    <td title="9次" class="item-tip">
                                        <span class="spec">9</span>
                                        <span >次</span>
                                    </td>
                                </tr>
                                <tr class="gradient-item">
                                    <td class="item-ranking">
                                        <div class="icon-ranking">
                                            <i class="icon-top3"></i>3
                                        </div>
                                    </td>
                                    <td class="td-item-label">
                                        <div title="公共基础组件" class="item-label">
                                            <p class="label">公共基础组件</p>
                                            <p class="class class-function"> 功能 </p>
                                        </div>
                                    </td>
                                    <td class="item-length">
                                        <div  class="length" style="width: 38%;"></div>
                                    </td>
                                    <td title="7次" class="item-tip">
                                        <span class="spec">7</span>
                                        <span >次</span>
                                    </td>
                                </tr>
                                <tr class="gradient-item">
                                    <td class="item-ranking">
                                        <div class="icon-ranking">
                                         4
                                        </div>
                                    </td>
                                    <td class="td-item-label">
                                        <div title="文件在线预览" class="item-label">
                                            <p class="label">文件在线预览</p>
                                            <p class="class class-business"> 业务 </p>
                                        </div>
                                    </td>
                                    <td class="item-length">
                                        <div  class="length" style="width: 16%;"></div>
                                    </td>
                                    <td title="18次" class="item-tip">
                                        <span class="spec">3</span>
                                        <span >次</span>
                                    </td>
                                </tr>
                                <tr class="gradient-item">
                                    <td class="item-ranking">
                                        <div class="icon-ranking">
                                            5
                                        </div>
                                    </td>
                                    <td class="td-item-label">
                                        <div title="用户认证" class="item-label">
                                            <p class="label">用户认证</p>
                                            <p class="class class-function">功能</p>
                                        </div>
                                    </td>
                                    <td class="item-length">
                                        <div  class="length" style="width: 15%;"></div>
                                    </td>
                                    <td title="18次" class="item-tip">
                                        <span class="spec">1</span>
                                        <span >次</span>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>
                    <div class="wlcp-maturity">
                        <div class="wlcp-base-title">
                            <i class="decor-l" style="width: 3.25rem;"></i>
                            <span class="header-tit">组件成熟度统计</span>
                            <i class="decor-r" style="width: 3.25rem;"></i>
                        </div>
                        <ul class="item-box">
                            <li class="item">
                                <p class="num"><span class="spec">5</span>个 </p>
                                <p class="name">中台认证</p>
                            </li>
                            <li class="item">
                                <p class="num"><span class="spec">13</span>个 </p>
                                <p class="name">较成熟待认证</p>
                            </li>
                            <li class="item">
                                <p class="num"><span class="spec">2</span>个 </p>
                                <p class="name">试验期</p></li>
                            <li class="item">
                                <p class="num"><span class="spec">6</span>个 </p>
                                <p class="name">初发布</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var $, layer, table, layOpenWin;
    layui.config({
        base: "${ctx}/static/js/"
    }).use(['jquery', 'layer', 'table', 'layOpenWin'], function () {
        $ = layui.$,
            layer = layui.layer,
            layOpenWin = layui.layOpenWin,
            table = layui.table;
        /*图表适应浏览器————————————————————————————————————————————---------------------*/
        window.addEventListener("resize", function () {
            resize();
        });
        resize();

    });
    function resize(){
        // 设计稿宽度
        const designWidth = 1919;
        // 屏幕宽度
        const windowWidth = window.innerWidth;
        // html根元素
        const html = document.documentElement;
        // 计算
        html.style.fontSize = (39.6458/designWidth * windowWidth) + 'px';
    }


</script>
</body>
</html>